<template>
  <view class="parking-vehicles-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="true" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="多欠费在停车辆" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <!-- 筛选条件 -->
          <view class="filter-section">
            <view class="filter-item">
              <text class="filter-label">驶入时间</text>
              <view class="date-range-picker">
                <up-input v-model="searchForm.startTime" placeholder="开始时间" readonly 
                  @click="showStartTimePicker = true" suffix-icon="calendar" />
                <text class="range-separator">至</text>
                <up-input v-model="searchForm.endTime" placeholder="结束时间" readonly 
                  @click="showEndTimePicker = true" suffix-icon="calendar" />
              </view>
            </view>
            
            <view class="filter-actions">
              <up-button type="primary" size="small" @click="handleSearch">筛选</up-button>
              <up-button type="default" size="small" @click="handleReset">重置</up-button>
            </view>
          </view>
        </up-sticky>
      </template>

      <!-- 统计信息 -->
      <view class="statistics-section">
        <view class="stat-card">
          <view class="stat-item">
            <text class="stat-value">{{ statisticsData.totalVehicles }}</text>
            <text class="stat-label">在停车辆总数</text>
          </view>
          <view class="stat-item">
            <text class="stat-value highlight-red">{{ statisticsData.totalArrears }}</text>
            <text class="stat-label">总欠费金额(元)</text>
          </view>
          <view class="stat-item">
            <text class="stat-value highlight-orange">{{ statisticsData.avgArrears }}</text>
            <text class="stat-label">平均欠费(元)</text>
          </view>
        </view>
      </view>

      <!-- 车辆列表 -->
      <view class="vehicles-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="plate-number">
              <up-tag :text="item.plateNumber" type="primary" size="large"></up-tag>
            </view>
            <view class="arrears-amount">
              <text class="amount-label">欠费</text>
              <text class="amount-value">¥{{ item.totalArrears }}</text>
            </view>
          </view>
          
          <view class="card-content">
            <view class="info-row">
              <view class="info-item">
                <text class="label">在停位置：</text>
                <text class="value">{{ item.parkingLocation }}</text>
              </view>
            </view>
            
            <view class="info-row">
              <view class="info-item">
                <text class="label">驶入时间：</text>
                <text class="value">{{ item.entryTime }}</text>
              </view>
              <view class="info-item">
                <text class="label">停车时长：</text>
                <text class="value duration">{{ item.parkingDuration }}</text>
              </view>
            </view>
          </view>
          
          <view class="card-footer">
            <up-button type="primary" text="查看详情" size="small" 
              @click="handleViewDetail(item)"></up-button>
          </view>
        </view>
      </view>
    </z-paging>

    <!-- 时间选择器 -->
    <up-datetime-picker 
      :show="showStartTimePicker" 
      v-model="startTimeValue"
      mode="datetime"
      @confirm="handleStartTimeConfirm"
      @cancel="showStartTimePicker = false"
    ></up-datetime-picker>
    
    <up-datetime-picker 
      :show="showEndTimePicker" 
      v-model="endTimeValue"
      mode="datetime"
      @confirm="handleEndTimeConfirm"
      @cancel="showEndTimePicker = false"
    ></up-datetime-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { useBoolean } from '@/hooks';
import { formatTime } from '@/utils/tools';

// 时间选择器状态
const { bool: showStartTimePicker, setTrue: openStartTimePicker, setFalse: closeStartTimePicker } = useBoolean();
const { bool: showEndTimePicker, setTrue: openEndTimePicker, setFalse: closeEndTimePicker } = useBoolean();

// 时间值
const startTimeValue = ref(new Date());
const endTimeValue = ref(new Date());

// 搜索表单
const searchForm = reactive({
  startTime: '',
  endTime: ''
});

// 统计数据
const statisticsData = ref({
  totalVehicles: 0,
  totalArrears: 0,
  avgArrears: 0
});

// 列表数据
const currentList = ref([]);
const paging = ref();

// 处理返回
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  })
};

// 处理开始时间确认
const handleStartTimeConfirm = (e: any) => {
  searchForm.startTime = formatTime(e.value, 'YYYY-MM-DD');
  closeStartTimePicker();
};

// 处理结束时间确认
const handleEndTimeConfirm = (e: any) => {
  searchForm.endTime = formatTime(e.value, 'YYYY-MM-DD');
  closeEndTimePicker();
};

// 处理搜索
const handleSearch = () => {
  paging.value?.reload();
};

// 处理重置
const handleReset = () => {
  searchForm.startTime = '';
  searchForm.endTime = '';
  paging.value?.reload();
};

// 查看详情
const handleViewDetail = (item: any) => {
  // 跳转到详情页面或显示详情弹窗
  console.log('查看详情', item);
};

// 查询列表数据
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    // 模拟数据
    const mockData = {
      list: [
        {
          plateNumber: '粤A12345',
          parkingLocation: 'A区-001号泊位',
          entryTime: '2024-01-15 08:30:00',
          parkingDuration: '2天8小时30分',
          totalArrears: '156.50'
        },
        {
          plateNumber: '粤B67890',
          parkingLocation: 'B区-025号泊位',
          entryTime: '2024-01-14 14:20:00',
          parkingDuration: '3天2小时15分',
          totalArrears: '289.80'
        },
        {
          plateNumber: '粤C11111',
          parkingLocation: 'C区-088号泊位',
          entryTime: '2024-01-13 09:45:00',
          parkingDuration: '4天6小时45分',
          totalArrears: '425.20'
        }
      ],
      total: 3
    };
    
    // 更新统计数据
    statisticsData.value = {
      totalVehicles: mockData.total,
      totalArrears: mockData.list.reduce((sum, item) => sum + parseFloat(item.totalArrears), 0).toFixed(2),
      avgArrears: (mockData.list.reduce((sum, item) => sum + parseFloat(item.totalArrears), 0) / mockData.total).toFixed(2)
    };
    
    paging.value?.complete(mockData.list);
  } catch (error) {
    console.error('查询失败:', error);
    paging.value?.complete([]);
  }
};

onMounted(() => {
  // 初始化时间范围为今天
  const today = new Date();
  const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
  
  searchForm.startTime = uni.$u.timeFormat(startOfDay, 'yyyy-mm-dd hh:MM:ss');
  searchForm.endTime = uni.$u.timeFormat(endOfDay, 'yyyy-mm-dd hh:MM:ss');
  
  // 初始化加载数据
  setTimeout(() => {
    paging.value?.reload();
  }, 100);
});
</script>

<style lang="scss" scoped>
.parking-vehicles-page {
  background-color: #f5f5f5;
}

.filter-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.filter-item {
  margin-bottom: 16px;
}

.filter-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-separator {
  font-size: 14px;
  color: #666;
  padding: 0 4px;
}

.filter-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.statistics-section {
  margin-bottom: 12px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  
  &.highlight-red {
    color: #ff4757;
  }
  
  &.highlight-orange {
    color: #ffa726;
  }
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.vehicles-list {
  padding: 0 20px;
}

.list-item-card {
  background: white;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0;
}

.plate-number {
  flex: 1;
}

.arrears-amount {
  text-align: right;
}

.amount-label {
  font-size: 12px;
  color: #666;
  margin-right: 4px;
}

.amount-value {
  font-size: 18px;
  font-weight: bold;
  color: #ff4757;
}

.card-content {
  padding: 12px 16px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.label {
  font-size: 13px;
  color: #666;
  margin-right: 4px;
  white-space: nowrap;
}

.value {
  font-size: 13px;
  color: #333;
  
  &.duration {
    color: #4080ff;
    font-weight: 500;
  }
}

.card-footer {
  padding: 0 16px 16px;
  display: flex;
  justify-content: flex-end;
}
</style>